<!DOCTYPE html>
<html>

	<head>
		<title>链接</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script>
/*			$.ajax({
				url:'login.php',
				type:'post',
			    dataType:'json',
			    success:function(datas){
			    	if(datas.code == 1){
			    		$('.usernames').html(datas.data.username);
			    	}else{
                        alert(datas.msg);
                        window.location.href = "personaLogin.html";
			    	}
			    }
			})*/
			
			
		</script>
	</head>
		<style>
			
			.row{
				margin-bottom: 15px;
			}
			.login{margin:20px auto;box-shadow: 0 0 10px #ccc;padding:10%;}
			.logins{width:100% !important;margin:20px auto !important;display: block;}
			.container li{cursor: pointer;list-style: none;}
			.loginstatus{width: 100%;padding: 10px;font-size: 20px;font-weight: bold;}
			.newslist,.newslist ul{width: 100%;padding:0 !important;margin:0 !important;}
			.newslist ul li{
				width:100%;
				border-bottom: 1px solid #ccc;
				overflow: hidden;
				padding:5px;
			}
			.loginout{
				display: inline-block;
				padding:5px 8px;
				background-color: #3385ff;
				color: #fff;
				font-size: 15px;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-ms-border-radius: 4px;
				margin-left: 10px;
				cursor: pointer;
			}
			.myCollection{
				width:100%;
			}
			.myCollection ul{
				padding:0 !important;
			}
			.myCollectionul,.myCollection>ul>li{
				width: 100%;
				overflow: hidden;
			}
			.myCollection>ul>li{
				/*border-bottom: 1px solid #ccc;*/
				margin:1px 0;
			}
			.myCollection>ul>li>span{
				display: block;
				width: 100%;
				background: rgba(0,0,0,.5);
				color: #fff;
				text-align: center;
				padding: 10px 0;
			}
			.inputbtm{
				border-bottom-color:#eee !important;
			}
			.listitem,.newslist ul li input{
				width:54%;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				height: 30px;
				line-height: 30px;
				float: left;s
			}
			.newslist ul li input{
				display: none;
			}
			.bj,.bj1{
				display: inline-block;
				padding:5px;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-ms-border-radius: 4px;
				background-color: #3385ff;
				color: #fff;
				margin:0 4px;
			}
			.tanc{
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.4);
				position: fixed;
				top:0;
				left: 0;
				z-index: 100;
				display: none;
			}
			.tccontent{
				width:90%;
				padding:20px 6px;
				overflow: hidden;	
				background-color: #fff;	
				position: fixed;
				top: 30%;
				left: 50%;
				margin-left: -45%;
				border-radius: 2px;
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				-ms-border-radius: 2px;
				padding-top: 40px;
			}
			.tccontent input{
				float: left;
				width: 80%;
				border:none;
				border-bottom: 1px solid #ccc;
			}
			.tccontent span{
				float: right;
				padding:2px 4px;
				color: #fff;
				background-color: #3385ff;
				border-radius: 2px;
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				-ms-border-radius: 2px;
			}
			.tccontent i{
				color: #000;
				font-style: normal;
				font-size: 26px;
				position: absolute;
				left: 2px;
				top:-6px;
				cursor: pointer;
			}
			.myCollection div.title,.titles{
				width:100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: rgba(0,0,0,.5);
				color: #fff;
				font-size: 15px;
				cursor: pointer;
			}
			.btns{
				float: right;
			}
			.current{
				background: #3385ff !important;
				color:#fff !important;
			}
			.surecontent{
				cursor: pointer;
			}
			.searchbox{
				width: 100%;
				padding:10px 0;
				/*overflow: hidden;*/
				background-color: #eee;
				position: relative;
			}
			.searchlist{
				position: absolute;
				top:40px;
				left: 50%;
				margin-left: -45%;
				width: 90%;
				padding:10px;
				background-color: #fff;
				box-shadow: 0 6px 10px #ccc;
				display: none;
				min-height: 100px;
				max-height: 176px;
				overflow-x: hidden;
				overflow-y: scroll;
			}
			.searchlist h3{
				width: 100%;
				height: 30px;
				line-height: 30px;
				background-color: #eee;
				color: #000;
				font-size: 15px;
				padding-left: 10px;
			}
			.searchlist ul{
				width: 100%;
				padding:0 !important;
			}
			.searchlist ul li{
				width: 100%;
				overflow: hidden;
				padding:10px;
				border-bottom: 1px solid #ccc;
			}

			.searchbox input{
				display: inline-block;
				width: 77%;
				margin-left: 12px;
				height: 30px;
				line-height: 30px;
			}
			.searchbox>span{
				display: inline-block;
				padding:5px;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-ms-border-radius: 4px;
				background-color: #3385ff;
				color: #fff;
				margin:0 4px;
			}
			.searchbtn{
				cursor: pointer;
			}
			.slideUl::-webkit-scrollbar{
				/*display: none;*/
				/*width: 5px;
				height: 10px*/
				
			}
			body::-webkit-scrollbar{
				display: none;
			}
			.slideUl{
				display: none;
				min-height: 39px;
				max-height: 120px;
				overflow-x: hidden;
				overflow-y: auto;
			}
			.slideUl li{
				overflow:hidden;
				border-bottom: 1px solid #ccc;
				padding:4px 0;
			}
			.slideUl li span.bj3{
				display: block;
				width:80%;
				float: left;
				height: 30px;
				line-height: 30px;
				text-overflow: ellipsis;
				overflow:hidden;
				white-space: nowrap;
				padding-left:4px; 
			}
			.colorbgs{
				background: #3385ff !important;
				color:#fff !important;
			}
			.bj12{
				float: right;
				width: 57px !important;
				height: auto !important;
				line-height: auto !important;
				padding:3px 0;
				background: #3385ff;
				color: #fff;
				border-radius: 4px;
				text-align: center;
			}
			.bj12:hover,.myCollection>ul>li>span,.slideUl li,span{
				cursor: pointer;
			}
			.closeboxs{
				display:block;
				width: 100%;
				text-align: right;
				padding:2px;
				color: #000;
			    font-style: normal;
			    font-size: 26px;
			    position: absolute;
			    right: 2px;
			    top: -6px;
			    cursor: pointer;
			}

		</style>
	<body>


      <!--   <span id="uid" style="display: none">{:session('uids')}</span> -->
		<!-- 编辑弹窗 start -->
		<div class="tanc">
			<div class="tccontent">
				<i onclick="closebox()">×</i>
				<input class="tcinput" type="" name="" value='' placeholder="请输入修改内容" />
				<span class="surecontent" onclick="edit(this)">确定</span>
			</div>
		</div>
		<!-- 编辑弹窗 end -->
		<div class="loginstatus">用户名： <span>{:session('usernames')}</span><span class="loginout" onclick="logout()">退出登录</span></div>
		<!-- 搜索框 start -->
		<div class="searchbox">
			<input type="" name="" placeholder="请输入搜索内容">
			<span class="searchbtn">搜索</span>
			<div class="searchlist">
				<i class="closeboxs" onclick="closeboxs(this)">×</i>
				<h3>以下是搜索内容</h3>
				<ul>
				</ul>
			</div>
		</div>
		<!-- 搜索框 end -->
		<div class="container newslist">
			<div class="titles scbox"><<点击查看我的收藏>></div>
			<ul class="myColbox" style="display: none;">
				{volist name="coll" id="vo"}
				<li>
					<span class="listitem" onclick="goOther({$vo.sid})" title="{$vo.titles}">{$vo.titles}</span>
					<!-- <input type="" name="" value='请输入修改内容，点击编辑结束' /> -->
					<div class="btns">
						<span class="bj" id="bj{$vo.id}" onclick="bianji({$vo.id})">编辑</span>
						<span class="bj1" id="del{$vo.id}" onclick="deleteCon({$vo.id})">刪除</span>
					</div>
				</li>
				{/volist}
			</ul>
		</div>
		<div class="myCollection">
			<ul>
				{volist name="cate" id="vo"}
				<li>
					<span class="catetory" id="{$vo.id}">{$vo.name}</span>
					<div class="slideUl">
						<ul>
							{volist name="vo.share" id="vos"}
							<li><span class="bj3" id="{$vos.id}" onclick="goOther({$vos.id})">{$vos.title}</span>
					            {if condition="$vos.state neq 1"}
								<span class="bj12" onclick="shoucang({$vo.id},{$vos.id})" id="sc{$vo.id}">收藏</span>
						        {else/}
								<span class="bj12" id="sc{$vo.id}" onclick="shoucang({$vo.id},{$vos.id})" style="background: #bbb;">已收藏</span>
								{/if}
								
							</li>
							{/volist}

						</ul>
					</div>
				</li>
				{/volist}
				{empty name="cates"}
				{else/}
				<li>
					<span class="catetory" id="0">其他</span>
					<div class="slideUl">
						<ul>
							{volist name="cates" id="vos"}
							<li><span class="bj3" id="{$vos.id}" onclick="goOther({$vos.id})">{$vos.title}</span>
								{if condition="$vos.state neq 1"}
								<span class="bj12" onclick="shoucang(0,{$vos.id})" id="sc{$vo.id}">收藏</span>
						        {else/}
								<span class="bj12" id="sc{$vo.id}" onclick="shoucang(0,{$vos.id})" style="background: #bbb;">已收藏</span>
								{/if}
							</li>
							{/volist}

						</ul>
					</div>
				</li>
				{/empty}
			</ul>
		</div>
		
        <br>
	    <div class="row" style="cursor: pointer;">
	        <div class="col-md-12">
	            <div class="portlet">
	                <div id="htmlDiv"></div>
	                <div class="col-lg-12" align="center">
	                    <!-- 分页控件，标签必须是<ul> -->
	                    <ul id="pageButton"></ul>
	                </div>
	            </div>
	        </div>
	    </div>
<script type="text/javascript">
	   /* var uid = $("#uid").text();
		if(uid == ""){
			window.location.href="{:url('personalogin')}";
		}*/
 		// 编辑修改标题的内容 start
 		var ids = '';
 		function bianji(id){
 			$('.tanc').show();
 			ids = id;
 		}

 		$('.surecontent').click(function(event){
				event.stopPropagation();
				var inpval = $('.tcinput').val();
				$('.listitem').eq(ids).html(inpval);
				$('.tcinput').val('');
				$('.tanc').hide();
			})
 		// $('.searchbtn').click(function(){
 		// 	if($('.searchlist').css('display') == 'none'){
 		// 		$('.searchlist').show();
 		// 	}else{
 		// 		$('.searchlist').hide();
 		// 	}
 		// })
		// 编辑修改标题的内容 end
		
		function deleteCon(id){
			$.ajax({
				url:"{:url('delcoll')}",
				type:'post',
				dataType:'json',
				data:{
					id:id
				},
				success:function(res){
					if(res.code == 1){
						$('#del'+id).parent().parent('li').remove();
					}else{
						alert(res.msg);
					}
				}
			})
		}
		// 点击收藏 start
		function shoucang(id,cid){
			$.ajax({
				url:"{:url('coll')}",
				type:'post',
				dataType:'json',
				data:{
					cid:id,
					sid:cid
				},
				success:function(res){
					if(res.code == 1){
						$('#sc'+id).html('已收藏');
						$('#sc'+id).css({'background':'#bbb'});
						var html = '';
							html += '<li>';
							html += '<span class="listitem" onclick=\'goOther("'+res.data.id+'")\' title="我的收藏内容2">'+res.data.title+'</span>';
							html += '<div class="btns">';
							html += '<span class="bj" id="1" onclick=\'bianji("'+res.data.id+'")\'>编辑</span>';
							html += '<span class="bj1" onclick=\'deleteCon("'+res.data.id+'")\'>刪除</span>';
							html += '</div>';
							html += '</li>';
							$('.myColbox').append(html);
					}else{
						alert(res.msg);
					}
				}
			})
			
		}
		// 点击收藏 end
		// 显示编辑弹窗 start
 		function closebox(){
 			$('.tanc').hide();
 		}
 		// 显示编辑弹窗 end
 		// 弹出层 start
 		$('.scbox').click(function(){
 			$('.myColbox').slideToggle(100);
 		})
		// 退出登录
		function logout(){
			window.location.href="{:url('index/loginout')}";
		}

		$('.myCollection>ul>li>span').click(function(){
			$(this).siblings('.slideUl').slideToggle(300);
		});

		$('.slideUl>li').click(function(){
			$(this).find('span').addClass('colorbgs').parent().siblings().find('span').removeClass('colorbgs');
		});

		function goOther(id){
			$.ajax({
				url:"{:url('collnum')}",
				type:'post',
				dataType:'json',
				data:{
					id:id
				},
				success:function(res){
					if(res.code == 1){
						top.rightFrame.location.href = "{:url('index/example3')}"+'?id='+id;
					}else{
						alert(res.msg);
					}
				}
			});
		}
		// 搜索功能 start
		$('.searchbtn').click(function(){
			var key = $(this).siblings('input').val();
			$('.searchlist>ul').find('li').remove();
			if(key != ''){
				$.ajax({
				url:"{:url('searchs')}",
				type:'post',
				dataType:'json',
				data:{
					key:key
				},
				success:function(res){
					if(res.code == 1){
						for(var i=0;i<res.data.length;i++){
							var title = res.data[i]['title'];
							var ids = res.data[i]['id'];
							var html = '';
								html+='<li>';
								html+='<span onclick="goOther('+ids+')">'+title+'</span>';
								html+='</li>';
								$('.searchlist>ul').append(html);
								$('.searchlist').show();
						}
					}
				}
			})
			}else{

			}
		})
		// 搜索功能 end
		function edit(ele){
			var txt = $(ele).siblings('input').val();
			var id = ids;
			$.ajax({
				url:"{:url('editcoll')}",
				type:'post',
				dataType:'json',
				data:{
					id:id,
					titles:txt
				},
				success:function(res){
					if(res.code == 1){
						var title = res.titles;
						$('#bj'+ids).parent().siblings('.listitem').html(title);
					}else{	
						alert(res.msg);
					}
				}
			})
		}

		function closeboxs(id){
			$(id).parent().hide();
		}
</script>
	</body>

</html>